<template>
	<div>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[1, 10, 20, 30]"
			:page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
		>
		</el-pagination>
	</div>
</template>

<script>
export default {
	props: {
		pageSize: {
			type: Number,
			default: 5,
		},
		total: {
			type: Number,
			default: 1,
		},
		currentPage: {
			type: Number,
			default: 1,
		},
	},
	methods: {
		handleSizeChange(val) {
			console.log(val)
		},
		handleCurrentChange(val) {
			console.log(val)
		},
	},
}
</script>

<style>
</style>